<template>
  <div style="padding: 0 15px">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="14"
      height="16"
      viewBox="0 0 14 16"
      fill="none"
    >
      <path
        :fill="topNav?(!theme.includes('2e3c56')? 'rgba(44, 78, 120, 1)' : '#fff'):(!topTheme.includes('2e3c56')? 'rgba(44, 78, 120, 1)' : '#fff')"
        d="M7.05 16.8057C7.98 16.8057 8.7 16.0857 8.7 15.1557L5.4 15.1557C5.4 16.0857 6.12 16.8057 7.05 16.8057ZM12.465 11.4357L12.465 7.14572C12.465 4.56572 10.635 2.40572 8.25 1.83572L8.25 1.29571C8.25 0.695715 7.92 0.155714 7.35 0.0357143C6.525 -0.159286 5.85 0.470715 5.85 1.28071L5.85 1.85072C3.465 2.40572 1.635 4.56572 1.635 7.14572L1.635 11.4357L0 13.1157L0 13.9557L14.1 13.9557L14.1 13.1157L12.465 11.4357Z"
        fill-rule="evenodd"
        fill-opacity="0.8"
      ></path>
    </svg>
  </div>
</template>

<script setup>
import useSettingsStore from "@/store/modules/settings";

const settingsStore = useSettingsStore();
const topTheme = computed(() => settingsStore.topTheme);
const theme = computed(() => settingsStore.theme);
const topNav = computed(() => settingsStore.topNav);

defineProps({
  isActive: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits();
// const toggleClick = () => {
//   emit('toggleClick');
// }
</script>

<style scoped>
.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.hamburger.is-active {
  transform: rotate(180deg);
}
</style>
